<template>
  <div class="shift">
    <div class="shift-search">
      <el-input
        v-model="formInline.gearName"
        style="width: 250px"
        placeholder="搜索"
        @change="handlePageChange(1)"
        @blur="handlePageChange(1)"
        class="shift-search-input"
      />
    
      <!-- <el-button
        type="primary"
        @click="handlePageChange(1)"
        class="shift-search-btn"
        >查询</el-button
      > -->
      <el-button
        type="primary"
        class="shift-search-right"
        @click="addDoctorFeeFun" v-btnPermission="'btn-gea-updata'"
        ><el-icon style="margin-right: 5px">
          <Plus /> </el-icon
        >新增</el-button
      >
    </div>
    <div class="shift-content">
      <Table
        :columns="tableColumns"
        :loading="loading"
        :data-source="tableData"
      />
    </div>
    <div class="shift-page-pagination">
      <Pagination
        style="margin-left: auto"
        :key="formInline.pageSize + 'Pagination' + formInline.pageNo"
        :count="total"
        :page-size="formInline.pageSize"
        :pageNo="formInline.pageNo"
        @onPagechange="handlePageChange"
        @onSizechange="handleSizeChange"
      />
    </div>
    <updata
      ref="updataRef"
      :data-type="dataType"
      @closeDrawer="getGearListApi"
    />
  </div>
</template>
<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue';
import type { TableColumn } from '@/types/table.ts';
import {
  getGearList,
  updateGear,
  deleteGear,
  enableGear,
  disableGear,
} from '@/api/gear/index';
import type {
  GearInfo,
  GearResponse,
  GearTable,
  GearPagination,
} from '@/types/gear';

import updata from './commons/updata.vue';
const updataRef = ref<InstanceType<typeof updata>>();

const dataType = ref(1); // 数据类型
const loading = ref<boolean>(false);
const formInline = ref<GearPagination>({
  gearName: '',
  pageNo: 1,
  pageSize: 10,
});
import type { Action } from 'element-plus';

const tableColumns: TableColumn[] = [
  { prop: 'gearName', label: '套餐名称' },
  { prop: 'rechargeAmount', label: '充值金额' },
  { prop: 'presentPrice', label: '销售价格' },
  { prop: 'sortNum', label: '排序' },
  { prop: 'isEnabled', label: '状态' },
  { prop: 'updateBy', label: '最近修改人' },
  { prop: 'updateTime', label: '最近修改时间' },
  {
    prop: 'action',
    label: '操作',
    type: 'action',
    width: 170,
    componentProps: {
      fixed: 'right',
    },
    buttonGroup: [
      {
        label: '编辑',
        permissions: 'btn-gea-edit',
        type: 'text',
        click: (row: any) => {
          //console.log('编辑', row);
          if (updataRef.value) {
            dataType.value = 1;
            updataRef.value.open1(row);
          }
        },
      },
      {
        label: '启用',
        statusName: ['isEnabled'],
        status: '停用',  permissions: 'btn-gea-enable',
        type: 'text',
        click: (row: any) => {
          enableGear(row.gearId).then((res) => {
            if (res.code == '200') {
              getGearListApi(); // 刷新列表

              ElMessage({
                type: 'success',
                message: '操作成功',
              });
            } else {
              
            }
          });
        },
      },
      {
        label: '停用',
        statusName: ['isEnabled'],
        status: '启用',
        type: 'text',permissions: 'btn-gea-disable',
        color: '#D90000',
        click: (row: any) => {
          disableGear(row.gearId).then((res) => {
            if (res.code == '200') {
              getGearListApi(); // 刷新列表
              ElMessage({
                type: 'success',
                message: '操作成功',
              });
            } else {
            
            }
          });
        },
      },
      {
        label: '删除',
        type: 'text',
        permissions: 'btn-gea-del',
        color: '#D90000',
        click: (row: any) => {
          ElMessageBox.alert('确定要删除吗？', '删除班次', {
            confirmButtonText: '确定',
            callback: (action: Action) => {
               if(action == 'cancel'){
                  return;
              }
              try {
                deleteGear(row.gearId).then((res) => {
                  if (res.code == '200') {
                    getGearListApi(); // 刷新列表
                    ElMessage({
                      type: 'success',
                      message: '操作成功',
                    });
                  } else {
                    
                  }
                });
              } catch (error: any) {
                //console.log(error, '删除失败');
              }
            },
          });
        },
      },
    ],
  },
];

//新增
const addDoctorFeeFun = () => {
  if (updataRef.value) {
    dataType.value = 0;
    updataRef.value.open();
  }
};

const total = ref<number>(0);


const handlePageChange = (page: number) => {
  formInline.value.pageNo = page;
  getGearListApi();
};
const handleSizeChange = (size: number) => {
  formInline.value.pageSize = size;
  formInline.value.pageNo = 1;
  getGearListApi();
};

const tableData = ref<GearInfo[]>([]);

const getGearListApi = async () => {
  loading.value = true;
  const res = await getGearList(formInline.value);
  
  res.data.list.forEach((item: any) => {
    item.isEnabled = item.isEnabled === '1' ? '启用' : '停用';
    item.presentPrice = (item.presentPrice/100).toFixed(2);
    item.rechargeAmount = (item.rechargeAmount/100).toFixed(2);
  });
  tableData.value = res.data.list;
  total.value = res.data.totalCount;
  loading.value = false;
};
getGearListApi();
</script>
<style>
.el-table th.el-table__cell {
  background-color: #f8f9fa !important;
}
</style>
<style lang="scss">
.shift {
  padding: 5px 24px;
  
  .table-cell-content {
    width: 100%;
    height: 100px;
    background: #ecf8f8;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0px 0px 0px 0px;
    padding: 10px;

    div {
      margin-bottom: 5px;
    }
  }

  .table-cell-content-null {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f3f3f3;
  }

  .table-cell-content:hover .table-cell-content-xf {
    display: flex;
  }

  .table-cell-content-xf {
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }

  .shift-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    padding: 12px 0;
  }

  .shift-search {
    display: flex;
    display: flex;
    align-items: center;

    .shift-search-input {
      margin-right: 20px;
    }

    .shift-search-select {
      margin-right: 20px;
    }

    .shift-search-right {
      margin-left: auto;
    }
  }

  .shift-page-pagination {
    display: flex;
    align-items: center;
    padding: 20px 24px;

    .drugStorage-page-pagination-total {
      margin-right: 20px;
    }
  }

  .shift-content {
    .table-components {
      width: 100%;
    }
  }
}
</style>
